<template>
  <!-- TencentCode 邀请关注 -->
  <PageContainer>
    <Loading v-model="isLoading">
      <view class="container" :style="{ minHeight: `calc(100vh - ${headerHeight + 'px'})` }">
        <Header title="邀请关注" />
        <!-- 已关注 -->
        <template v-if="userInfo.isOfficialAccount === IsOfficialAccountEnum.FOLLOWED">
          <text class="ali-icon icon-chenggong1" style="font-size: 96rpx; color: #65b85d"></text>
          <view class="title" style="margin-top: 100rpx">查询到您已关注公众号</view>
          <view class="des">接收活动、缴费、审核等通知</view>
          <TButton
            class="gutter-btn"
            :customStyle="{
              margin: '0 auto',
              marginTop: '100rpx',
              width: '300rpx',
            }"
            type="primary"
            text="进入主页"
            @click="toHome"
          />
        </template>
        <!-- 未关注 -->
        <template v-else-if="userInfo.isOfficialAccount === IsOfficialAccountEnum.NOTFOLLOWED">
          <view class="title">查询到您未关注公众号</view>
          <view class="des">接收活动、缴费、审核等通知</view>
          <view class="code-img">
            <TImage :src="codeImg" width="504rpx" height="504rpx" :showMenuByLongpress="true" />
          </view>
          <view class="des">长按识别二维码,或截图保存</view>
        </template>
      </view>
    </Loading>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  TencentCode  邀请关注 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { computed, ref, unref } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { onLoad, switchTab } from '@/router';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { IsOfficialAccountEnum } from '@/enums/loginEnum';
  import Loading from '@/components/Loading/index.vue';
  import { authOfficialAccount } from '@/utils';
  import { storeToRefs } from 'pinia';

  const isLoading = ref(true);
  const { globalConfig } = useAppStoreWithOut();
  const useUser = useUserStoreWithOut();
  const { userInfo } = storeToRefs(useUser);
  const codeImg = computed(() => globalConfig?.officialAccounts);
  const headerHeight = ref(0);

  function toHome() {
    switchTab('home');
  }

  onLoad(async () => {
    try {
      await authOfficialAccount();
    } catch (error) {}
    isLoading.value = false;
  });
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
    text-align: center;
    color: #333;
    font-size: 28rpx;
    padding-top: 100rpx;

    .title {
      font-size: 38rpx;
      font-weight: bold;
      margin-bottom: 28rpx;
    }

    .code-img {
      width:  504rpx;
      margin: 100rpx auto;
    }
  }
</style>
